<template>
  <div>
    <el-table
        :data="dataShow"
        style="width: 100%">
      <el-table-column
          fixed
          prop="couponShowName"
          label="优惠券名称">
      </el-table-column>
      <el-table-column
          prop="couponShowMoney"
          label="金额">
      </el-table-column>
      <el-table-column
          prop="couponShowMax"
          label="订单下限">
      </el-table-column>
      <el-table-column
          prop="couponShowMax"
          label="发放数量">
      </el-table-column>
      <el-table-column
          prop="couponShowUse"
          label="剩余数量">
      </el-table-column>
      <el-table-column
          prop="couponStartTime"
          label="起始日期">
      </el-table-column>
      <el-table-column
          prop="couponEndTime"
          label="结束日期">
      </el-table-column>
      <el-table-column
          fixed="right">
        <template slot-scope="scope">
          <el-button @click="handleClick({arr:item.message,scope:scope.row})" :type="item.type" :icon="item.icon" size="small" v-for="item in arr" :key="item.message" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="优惠券详情" :visible.sync="isFlag" width="80%">
      <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="couponId"
            label="编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="couponNumber"
            label="优惠券序列号">
        </el-table-column>
        <el-table-column
            prop="order.orderCode"
            label="订单号">
        </el-table-column>
        <el-table-column
            prop="user.userName"
            label="使用会员">
        </el-table-column>
        <el-table-column
            prop="couponUpdateTime"
            label="使用时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteUser()" type="text" size="small"><span class="size"><i class="el-icon-delete"></i></span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改优惠券" :visible.sync="flag" width="80%">
      <ul class="box">
        <li><div>优惠券名称</div><div class="zy"><el-input v-model="updateOrder.name" placeholder="优惠券名称"></el-input></div></li>
        <li><div>优惠券的金额</div><div class="zy"><el-input v-model="updateOrder.money" placeholder="优惠券的金额"></el-input></div><div class="zy">此券可抵的金额</div></li>
        <li><div>订单金额</div><div class="zy"><el-input v-model="updateOrder.orderMoney" placeholder="订单金额"></el-input></div><div class="zy">订单满多少可以用</div></li>
        <li class="block">
          <div><span class="demonstration">发放日期</span></div>
          <div class="zy">
            <el-date-picker
                v-model="updateOrder.date"
                type="datetime"
                placeholder="选择发放日期">
            </el-date-picker>
          </div>
        </li>
        <li><div>结束日期</div>          <div class="zy">
          <el-date-picker
                  v-model="updateOrder.day"
                  type="datetime"
                  placeholder="选择发放日期">
          </el-date-picker>
        </div></li>
        <li><div>发放的数量</div><div class="zy"><el-input v-model="updateOrder.number" placeholder="发放的数量"></el-input></div></li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <div class="block right">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name: "promote",
  inject:['reload'],
  data() {
    return {
      tableData:[],
      tableData3: [],
      arr:[{message:'查看',icon:'el-icon-search',type:'primary'},{message:'修改',icon:'el-icon-edit',type:'primary'},{message:'删除',icon:'el-icon-delete',type:'danger'}],
      isFlag:false,
      flag:false,
      updateOrder:{
        orderId:'',
        name:'',
        money:'',
        orderMoney:'',
        date:'',
        day:'',
        number:'',
      },
      couponId:'',
      totalPage: [],
      pageSize: 3,
      pageNum: 1,
      dataShow: [],
      currentPage: 0,
      totalNum:0,
      multipleSelection:[],
    }
  },
  mounted() {
       this.loading();
  },
  methods: {
    handleClick(row) {
      if(row.arr=='查看'){
        this.tableData3=[];
        this.couponShowId=row.scope.couponShowId;
        console.log(this.couponShowId)
        this.$axios.post('/api/coupon/AdminAll?couponShowId='+this.couponShowId).then((res)=>{
          //将查看操作的返回结果打印
          console.log(res.data.data);
          let lists=res.data.data;
          lists.forEach((item)=>{
            this.tableData3.push(item);
          })
          this.tableData3.forEach((item)=>{
            if(!item.couponNumber){
              item.couponNumber='无';
            }if(!item.order.orderCode){
              item.order.orderCode='无';
            }if(!item.couponUpdateTime){
              item.couponUpdateTime='未使用';
            }
          })
        })
        this.isFlag=true;
      }else if (row.arr=='修改'){
        this.updateOrder.orderId=row.scope.couponShowId;
        this.updateOrder.name=row.scope.couponShowName;
        this.updateOrder.money=row.scope.couponShowMoney;
        this.updateOrder.orderMoney=row.scope.couponShowMinimoney;
        this.updateOrder.date=row.scope.couponStartTime;
        this.updateOrder.day=row.scope.couponEndTime;
        this.updateOrder.number=row.scope.couponShowMax;
        console.log(this.updateOrder.orderId);
        this.flag=true;
      }else if (row.arr=='删除'){
        // if(row.tai !='3'){
        //   this.$message({
        //     message: '未过期的优惠券不能删除哦',
        //     type: 'warning'
        //   });
        //   return
        // }
        console.log(row.scope);
        let orderList=[row.scope.couponShowId];
        orderList.push()
        this.$axios.post('/api/coupon/deleteAll',[...orderList]).then((res)=>{
          //将修改操作的返回结果打印
          console.log(res.data);
          if(res.data.code==200){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
          this.reload();
        })
      }
    },
    leave(row){
      this.$axios.post('/api/userdelete',{id:row}).then((res)=>{
        //将修改操作的返回结果打印
        console.log(res);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection.length);
    },
    update:function (){
      this.updateOrder.date=this.updateOrder.date.getFullYear() + '-' + (this.updateOrder.date.getMonth() + 1) + '-' + this.updateOrder.date.getDate() + ' ' + this.updateOrder.date.getHours() + ':' + this.updateOrder.date.getMinutes() + ':' + this.updateOrder.date.getSeconds();
      this.updateOrder.day=this.updateOrder.day.getFullYear() + '-' + (this.updateOrder.day.getMonth() + 1) + '-' + this.updateOrder.day.getDate() + ' ' + this.updateOrder.day.getHours() + ':' + this.updateOrder.day.getMinutes() + ':' + this.updateOrder.day.getSeconds();
      this.$axios.post('/api/coupon/edit',{couponShowId:this.updateOrder.orderId,couponShowName:this.updateOrder.name,couponShowMoney:this.updateOrder.money,couponShowMinimoney:this.updateOrder.orderMoney,couponStartTime:this.updateOrder.date,couponEndTime:this.updateOrder.day,couponShowMax:this.updateOrder.number}).then((res)=>{
        //将修改操作的返回结果打印
        console.log(res.data);
        if(res.data.code==200){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        }else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
        this.reload();
      })
      this.flag=false;
    },
    deleteUser(){
      if (this.multipleSelection.length>0){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let listUser=[];
            this.multipleSelection.forEach((item)=>{
              listUser.push(item.couponId)
            });
            console.log(listUser);
            this.$axios.post('/api/coupon/delete',[...listUser]).then((res)=>{
              console.log(res.data)
              if(res.data.code==200){
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.tableData3.forEach((item,index)=>{
                  if(item.couponId==listUser[index]){
                    this.tableData3.splice(index,1);
                  }
                })
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      }else {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.dataShow = this.totalPage[val-1]
    },
    loading:function (){
      this.$axios.post('/api/agoCoupon/All',{}).then((res)=>{
        //挂载后从后台拿取相应的优惠券信息，
        let AdminAll=res.data.data;
        console.log(res.data.data);
        AdminAll.forEach((item,i)=>{
          this.tableData.push(item)
          this.totalNum=i+1;
        });
        //分页处理
        if(this.tableData.length>0){
          // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
          this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
          for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
            this.totalPage[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))
          }
          // 获取到数据后显示第一页内容
          this.dataShow = this.totalPage[this.currentPage-1];
        }
      })
    }
  },
}
</script>

<style scoped>
.size{
  font-size: 20px;
}
.box li{
  list-style-type: none;
  display: flex;
  align-items: center;
  height: 60px;
  width: 500px;
}
.zy{
  margin-left: 20px;
}
.right{
  text-align: right;
  margin-top: 10px;
}
</style>